.widPaneCont[data-hide='true'] {
  transform: translateX(-110%);
  transition: all 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}

.widPaneCont {
  --bg1: rgba(255, 255, 255, 0.6);
  position: absolute;
  left: 12px;
  bottom: 80px; // tabbar height + 12px
  height: 600px;
  width: 460px;
  max-width: 50vw;
  border-radius: 30px;
  overflow: hidden;
  transform: translateX(0);
  backdrop-filter: blur(5px);
  transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: 9999;

  &[data-hide='true'] {
    transform: translateX(-110%);
    transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
  }

  .widPane {
    width: 100%;
    height: 100%;
    color: var(--dark-txt);
    background: var(--bg1);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    padding: 24px;
    padding-top: 80px;
  }

  .accountsTop {
    flex-direction: row;
    display: flex;
  }

  .avatar {
    border-radius: 100px;
  }
}

.bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9998;
}

.balanceCard {
  background: rgba(255, 255, 255, 0.4);
  padding: 20px;
  border-radius: 20px;
}
